<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="false"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="title"
    :width="width"
  >
    <el-form
      ref="formRef"
      :inline="true"
      :model="state.form"
      :rules="dataRules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="办理人类型" prop="jumpJobType">
            <el-tooltip placement="top">
              <template #content>
                区分【目标节点任务】的【办理人类型】是审批人还是审批角色,可不选择
              </template>
              <el-radio-group
                v-model="state.form.auditorType"
                @change="handleAuditorTypeChange"
              >
                <el-radio label="个人" value="0" />
                <el-radio
                  label="角色"
                  value="1"
                  v-if="props.appointType === '1'"
                />
              </el-radio-group>
            </el-tooltip>
            <el-button
              v-if="state.form.auditorType"
              text
              type="primary"
              icon="delete"
              @click="handleClearAuditorType"
              >清空</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="state.form.auditorType === '0'">
          <el-button type="primary" @click="showStaffPicker"
            >选择人员</el-button
          >
          {{ state.form.userName }}
        </el-col>
        <el-col :span="24" v-if="state.form.auditorType === '1'">
          <el-button type="primary" @click="showRolePicker">选择角色</el-button>
          {{ state.form.roleName }}
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="confirm">
        确定
      </el-button>
    </template>
    <StaffPicker ref="staffPickerRef" @change="handleStaffConfirm" />
    <RolePicker ref="rolePickerRef" @change="handleRoleConfirm" />
  </el-dialog>
</template>
<script setup lang="ts">
import { DIC_PROP } from "@/views/design/process/Dict";
import { validateNull } from "@/utils/validate";
import StaffPicker from "@/components/staffPicker.vue";
import RolePicker from "@/components/rolePicker.vue";
import { computed, reactive, ref } from "vue";
import { useMessage } from "@/hooks/message";

const props = defineProps({
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  },
  // 0:转办 1:指定下一办理人
  appointType: {
    type: String,
    default: "0"
  }
});

const emits = defineEmits(["confirm"]);
const formRef = ref();
const staffPickerRef = ref();
const rolePickerRef = ref();

const title = computed(() => {
  if (props.appointType === "0") {
    return "设置转办后办理人";
  } else if (props.appointType === "1") {
    return "设置下一任务办理人";
  } else {
    return "选择办理人/角色";
  }
});

const state = reactive({
  dialogVisible: false,
  form: {
    auditorType: "0",
    userId: "",
    userName: "",
    roleId: "",
    roleName: ""
  }
});

// 定义校验规则
const dataRules = ref({
  auditorType: [
    { required: true, message: "办理人类型不能为空", trigger: "blur" }
  ]
});

const showStaffPicker = () => {
  staffPickerRef.value.show();
};

const showRolePicker = () => {
  rolePickerRef.value.show();
};

const handleStaffConfirm = (rows: { id: string; userName: string }[]) => {
  state.form.userId = rows[0].id;
  state.form.userName = rows[0].userName;
};

const handleRoleConfirm = (rows: { id: string; roleName: string }[]) => {
  state.form.roleId = rows[0].id;
  state.form.roleName = rows[0].roleName;
};

function handleAuditorTypeChange(type: string) {
  if (type === DIC_PROP.JOB_USER_TYPE[0].value) {
    state.form.userId = "";
    state.form.userName = "";
  } else if (type === DIC_PROP.JOB_USER_TYPE[1].value) {
    state.form.roleId = "";
    state.form.roleName = "";
  }
}

function handleClearAuditorType() {
  state.form.auditorType = "0";
  state.form.userId = "";
  state.form.userName = "";
  state.form.roleId = "";
  state.form.roleName = "";
}

function confirm() {
  const valid = formRef.value.validate().then(valid => {
    if (valid) {
      let a = validateNull(state.form.userId) && !state.form.userId;
      let b = validateNull(state.form.roleId) && !state.form.roleId;
      // 指定待跳转人/角色
      if (state.form.auditorType === DIC_PROP.JOB_USER_TYPE[0].value) {
        if (a) {
          useMessage().error("请选择任务办理人");
          return;
        }
      } else if (state.form.auditorType === DIC_PROP.JOB_USER_TYPE[1].value) {
        if (b) {
          useMessage().error("请选择任务办理角色");
          return;
        }
      }
      const params = {
        auditorType: state.form.auditorType,
        userId: state.form.userId,
        roleId: state.form.roleId
      };
      console.log(params);
      close();
      emits("confirm", params);
    }
  });
}

const show = () => {
  state.dialogVisible = true;
};

const close = () => {
  state.form = {
    auditorType: "0",
    userId: "",
    userName: "",
    roleId: "",
    roleName: ""
  };
  state.dialogVisible = false;
};

defineExpose({
  show,
  close
});
</script>
